<!DOCTYPE html>
<html>

<head>
    <title>demo</title>
    <meta charset="UTF-8">
    <style type="text/css">
        .container {
            height: 500px;
            width: 500px;
            position: relative;
        }

        .start,
        .end {
            position: absolute;

            display: inline-block;
            height: 50px;
            width: 50px;
            border: 1px solid #ddd;
        }

        .start {
            left: 0;
            top: 0;
        }

        .container .end {
            right: 0;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="start" id="start">start</div>
        <div class="end" id="end">end</div>
    </div>
    <script src="./leader-line.min.js"></script>
    <script type="text/javascript">
        new LeaderLine(
            document.getElementById('start'),
            document.getElementById('end'),
            {dash: {animation: true}}
        );
    </script>
</body>
</html>